<template>
  <div style="height: 100%;padding: 0 5px;">
    <EditTable @change-edit-method="changeEditMethod" @selected-table-data="handleSelectedTableData"
      :data="editorToTable" :editor="editor" @all-table-data="handleAllTableData" />
    <multipleEdit ref="multipleEditRef" :editorValue="editorValue" @update-editor-value="updateEditorValue"
      @text-to-json="handleTextToJSON" />
  </div>
</template>

<script setup lang="ts">
import EditTable from '../../components/EditTable.vue';
import multipleEdit from '../../debug/dialog/MultipleEdit.vue'
import { jsonToTableData, tableDataToJson } from '@/utils/index'
import { propTypes } from '@/utils/propTypes'
const multipleEditRef = ref()
const editorToTable = ref()
const editorValue = ref()
const props = defineProps({
  data: propTypes.object.def({}),
  editor: propTypes.bool.def(true)
})
const emit = defineEmits(['paramsValue'])
/**
 * 响应批量编辑
 * */
const changeEditMethod = (tableData) => {
  multipleEditRef.value.open(tableData)
}
/**
 * 表格数据变化并存储
 * */
const handleSelectedTableData = (data) => {
  data.forEach((item, index) => {
    if (!item.keyName) {
      data.splice(index, 1)
    }
  })
  const result = data.map(item => {
    return {
      keyName: item.keyName,
      keyValue: item.keyValue,
      keyType: item.keyType
    }
  })
  emit('paramsValue', result)
}
/**
 * 表格全部数据
 * */
const handleAllTableData = (data) => {
  editorValue.value = JSON.stringify(tableDataToJson(data))
}
/**
 * 批量数据编辑后回显到表格
 * */
const updateEditorValue = (data) => {
  editorToTable.value = jsonToTableData(JSON.parse(data))
  editorToTable.value.push({ keyName: '', keyValue: '', keyType: '' })
}
/**
 * 弹窗中text改变，触发editor改变
 * */
const handleTextToJSON = (data) => {
  editorValue.value = JSON.stringify(data)
}
onMounted(() => {
  editorToTable.value = props.data.params ? JSON.parse(props.data.params) : []
})
</script>

<style scoped>
:deep(th.el-table__cell) {
  font-weight: 400;
  /* color: #000; */
}
</style>
